import * as THREE from 'three';

let renderer: any,
	camera: any,
	scene: any,
	// gui: any,
	mesh: any,
	light: any,
	stats: any,
	col: any,
	material: any,
	clock: any;
let width = 800;
let height = 500;
function initRender(el) {
	renderer = new THREE.WebGLRenderer({
		antialias: true,
		alpha: true,
		preserveDrawingBuffer: true,
		canvas: el
	});

	renderer.setSize(width, height);
	renderer.setClearColor('#e5e5e5', 0);
	renderer.shadowMap.enabled = true;
	// 告诉渲染器需要阴影效果
}

function initCamera() {
	camera = new THREE.PerspectiveCamera(55, width / height, 0.1, 100);
	camera.position.z = 4;
	scene.add(camera);
}

function initScene() {
	scene = new THREE.Scene();
	// scene.background = new THREE.Color(0x000000)
	// scene.background = cubeTexture
	// 辅助线
	// let grid = new THREE.GridHelper(1000, 30, 0xcccccc, 0xcccccc)
	// scene.add(grid)
	// // 辅助工具
	// var helper = new THREE.AxesHelper(1000)
	// scene.add(helper)
}

function initLight() {
	light = new THREE.PointLight(0xffffff, 2);
	light.position.x = 2;
	light.position.y = 3;
	light.position.z = 4;

	scene.add(light);
}

function initModel() {
	// 添加立方体
	let loader = new THREE.TextureLoader();
	let texture = loader.load('./texture.jpg');
	let height = loader.load('./img/lizi/smoke.png');

	let alpha = loader.load('./img/texture/sprites/disc.png');

	let geometry = new THREE.PlaneBufferGeometry(3, 3, 64, 64);
	let material = new THREE.MeshStandardMaterial({
		color: '#1a4ac6',
		map: texture,
		displacementMap: height,
		alphaMap: alpha,
		displacementScale: 0.6,
		transparent: true,
		depthTest: true
	});

	mesh = new THREE.Mesh(geometry, material);
	mesh.rotation.x = 181;
	scene.add(mesh);
}

// 更新纹理贴图的方法
function updateUV() {
	// 一种方法，直接全写在一个方法内
	// texture.matrix.setUvTransform( API.offsetX, API.offsetY, API.repeatX, API.repeatY, API.rotation, API.centerX, API.centerY );
	// 另一种方法，分开写
	// material.map.matrix
	//   .identity() // 矩阵重置
	//   .translate(-gui.centerX, -gui.centerY) // 设置中心点
	//   .rotate(gui.rotation) // 旋转
	//   .scale(gui.repeatX, gui.repeatY) // 缩放
	//   .translate(gui.centerX, gui.centerY) // 设置中心点
	//   .translate(gui.offsetX, gui.offsetY) // 偏移
}

function render() {
	// clock = new THREE.Clock()
	// let tick = () => {
	//   let e = clock.getElapsedTime()
	//   mesh.rotation.z = e * 5
	// }
	// tick()
	mesh.rotation.z += 0.009;
}

// 窗口变动触发的函数
function onWindowResize() {
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	renderer.setSize(width, height);
}

function animate() {
	// 更新控制器
	render();

	renderer.render(scene, camera);

	requestAnimationFrame(animate);
}
function beforeDestroy() {
	THREE.Cache.clear();
	renderer.dispose();
	renderer.forceContextLoss();
	renderer.domElement = null;
	renderer = null;
}

// import * as dat from "dat.gui"
// function initgui() {
//   let gui = new dat.GUI()
//   gui.add(mesh.rotation, "x").min(0).max(600)
//   gui.add(light.position, "x")
//   gui.add(light.position, "y")
//   gui.add(light.position, "z")
//   col = { color: "#00ff00" }
//   gui.addColor(col, "color").onChange(() => {
//     light.color.set(col.color)
//   })
// }
export {
	animate,
	camera,
	initCamera,
	// initgui,
	initLight,
	initModel,
	initRender,
	initScene,
	mesh,
	onWindowResize,
	renderer,
	beforeDestroy
};
